<!-- 显示在管理员主界面Main区域的；员工管理界面 -->
<template>
  <div>
    <el-table :data="tableData" stripe class="table">
      <el-table-column fixed sortable prop="workId" label="工号" width="120" />
      <el-table-column prop="name" label="姓名" width="120" />

      <el-table-column prop="gender" label="性别" width="120">
        <template #default="scope">
          <el-tag
            :type="scope.row.gender === '男' ? '' : 'info'"
            disable-transitions
            effect="light"
            round
            >{{ scope.row.gender }}</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column
        prop="position"
        label="职务"
        width="100"
        :filters="[
          { text: '后厨', value: '后厨' },
          { text: '服务员', value: '服务员' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag
            :type="scope.row.position === '后厨' ? 'info' : 'success'"
            disable-transitions
            >{{ scope.row.position }}</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column prop="phoneNumber" label="联系方式" width="150" />
      <el-table-column prop="dateIn" label="入职时间" width="150" />
      <el-table-column prop="account" label="账号" width="150" />
      <el-table-column prop="password" label="密码" />

      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="modifyHandler"
            >修改</el-button
          >
          <el-button link type="primary" size="small" @click="deleteHandler"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router"; //页面跳转第一步：引入，便于成功登录，跳转到下一个页面（第0步，修改router.js）
import type { TableColumnCtx, TableInstance } from "element-plus";
const router = useRouter();
const route = useRoute(); //页面跳转第二步：创建实例

interface Employee {
  workId: String;
  name: String;
  gender: String;
  position: String;
  phoneNumber: String;
  dateIn: String;
  account: String;
  password: String;
}

const filterTag = (value: string, row: Employee) => {
  return row.position == value;
};

const modifyHandler = () => {};

const deleteHandler = () => {};

const tableData: Employee[] = [
  {
    workId: "2001",
    name: "张三",
    gender: "女",
    position: "服务员",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
  {
    workId: "2002",
    name: "李四",
    gender: "男",
    position: "后厨",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
  {
    workId: "2003",
    name: "王五",
    gender: "男",
    position: "服务员",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
  {
    workId: "2004",
    name: "赵六",
    gender: "男",
    position: "服务员",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
  {
    workId: "2005",
    name: "赵六",
    gender: "女",
    position: "服务员",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
  {
    workId: "2006",
    name: "赵六",
    gender: "男",
    position: "服务员",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
  {
    workId: "2007",
    name: "赵六",
    gender: "女",
    position: "服务员",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
  {
    workId: "2008",
    name: "赵六",
    gender: "男",
    position: "服务员",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
  {
    workId: "2009",
    name: "赵六",
    gender: "女",
    position: "服务员",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
  {
    workId: "2010",
    name: "赵六",
    gender: "女",
    position: "服务员",
    phoneNumber: "18328048639",
    dateIn: "2021-11-14",
    account: "18328048639",
    password: "monge2002",
  },
];
</script>

<style lang="scss" scoped>
.table {
  width: 90%;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  text-align: center;
}
</style>
